<template>
	<view class="order">
		<headTop></headTop>
		<view class="search">
			<uv-search placeholder="请输入订单编号" v-model="params.keyword" @search="getList" :clearabled="true"
				:showAction="false" bgColor="rgba(255,255,255, .3)"></uv-search>
		</view>
		<view class="tabs">
			<uv-tabs :list="sortList" :lineColor="`url(${iconImg}) 100% 100%`" lineHeight="6"></uv-tabs>
		</view>
		<view class="content">
			<view class="list" v-for="item in orderList" :key="item.id" @tap="toOrderDetails(item.order_no)">
				<view class="list-top">
					<view>{{ item.order_no }}</view>
					<view>已完成{{ item.status }}</view>
				</view>
				<view class="list-info">
					<uv-row>
						<uv-col span="3">
							<uv-image :src="item.product_image ? item.product_image : '/static/images/default.png'"
								width="18vw" height="18vw" radius="2vw">
								<template v-slot:error>
									<uv-image src="/static/images/default.png" width="18vw" height="18vw"
										radius="2vw"></uv-image>
								</template>
							</uv-image>
						</uv-col>
						<uv-col span="9">
							<view class="list-title">{{ item.product_name }}</view>
							<view class="list-details">创建时间: {{ item.created_at }}</view>
							<view class="list-time">完成时间: {{ item.updated_at }}</view>
							<view>
								<text class="list-details">共1件商品 合计:</text>
								<text :style="{ color: getTheme.themeColor }">¥{{ item.total_price }}</text>
							</view>
						</uv-col>
						<!-- 					<uv-col span="2">
							<view class="list-button">
								<uv-button text="详情"
									:color="defaultTheme.uni_button_bg_color"
									size="mini" shape="circle"></uv-button>
							</view>
						</uv-col> -->
					</uv-row>
				</view>
			</view>
			<view v-if="isBottom">
				<uv-divider text="已经到底了"></uv-divider>
			</view>
		</view>
		<zwTabBar :defaultSel="3" :bigIdx="3"></zwTabBar>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import zwTabBar from "@/components/zw-tabbar/zw-tabbar.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	import headTop from "@/components/headTop/index.vue";
	import { orderApi } from "@/api/index";

	const keyword = ref();
	const sortList = ref([{ name: "全部" }, { name: "待付款" }, { name: "待发货" }, { name: "处理中" }, { name: "已完成" }, { name: "退款中" }, { name: "已退款" }]);
	const params = ref({
		page: 1,
		limit: 8,
		keyword: "",
		keyword_type: "order_no",
		status: 4
	});

	const orderList = ref<any>([]);
	const isBottom = ref<boolean>(false);
	const getList = async () => {
		try {
			const res = await orderApi.getlist(params.value);
			if (params.value.limit > res.data.list.length) {
				isBottom.value = true;
			}
			orderList.value = [...orderList.value, ...res.data.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* ------------------------------------------------------------下拉加载------------------------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});

	/* ------------------------------------------------------------tabs图标------------------------------------------------- */
	import { getIcon } from "@/utils/index";
	const { iconImg } = getIcon();

	/* ------------------------------------------------------------跳转订单详情------------------------------------------------- */
	const toOrderDetails = (order_no) => {
		uni.navigateTo({
			url: `/pages/orderDetails/orderDetails?order_no=${order_no}`
		});
	};
</script>

<style lang="scss">
	.order {
		.search {
			margin-top: 2vw;
		}

		.content {
			padding-bottom: 80px;

			.list {
				background-color: rgba(255, 255, 255, 0.6);
				border-radius: 2vw;
				margin-top: 1.5vw;
				padding: 2vw 3vw;

				.list-top {
					padding-bottom: 2vw;
					display: flex;
					justify-content: space-between;
					color: #999999;
					font-size: 26rpx;
					border-bottom: 1px solid #ddd;
				}

				.list-info {
					margin-top: 1.5vw;

					.list-title {
						font-weight: 500;
						margin-bottom: 1vw;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.list-details,
					.list-time,
					.list-num {
						font-size: 26rpx;
						color: #999999;
					}

					.list-button {
						line-height: 16vw;
					}
				}
			}
		}
	}
</style>